@import "_func.less";
@slice: "img/main/slice/";

// 组件
.tab-content .tab-pane { display: none;}
.tab-content .active { display: block;}

// 按钮支持标签 input button a
.btn { display: inline-block; vertical-align: middle; min-width: 50px; padding: 5px 15px; line-height: 1.4; text-align:center; font-size: 12px; color: #fff; background: #1abc9c;
   webkit-user-select: none; //a
  border:0; cursor:pointer; // input
  transition: color .25s linear, background-color .25s linear;
  &:hover { color: #fff; background: #48c9b0; text-decoration: none;}
  &:focus { outline: 0;}
}

// 确定按钮 .btn-y 取消按钮 .btn-n 超链接按钮 .btn-a
.btn-y, .btn-n { min-width: 110px; padding: 8px 15px; font-size:16px; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 15px;
}
.btn-n {  background: #bdc3c7;
  &:hover {background: #cacfd2; }
}
a.btn-y, a.btn-n {
  *width: 80px;
  *white-space: nowrap;
  *min-width: auto;
}

// 搜索按钮 32x32
.btn-search { background: @green; border: 0; padding: 5px; vertical-align: -6px;
  .icon-search { display: block; width: 20px; height: 20px; background-image: url("@{slice}icon-search-white.png");}
}

// 单选框 复选框
input[type="radio"], input[type="checkbox"] {vertical-align: -2px; margin-right: 2px;}

// 输入框
// 其它宽度用 style 定义。
.input-text { width: 240px; height: 28px; line-height: 28px\9; padding: 0 5px;  }
.input-text, textarea, select {border: 1px solid #DCDCDC; border-radius: 2px;
  &:focus {outline: 0; border: 1px solid @green;}
}
// 数字输入框 60px
input[type="number"] {width: 60px;}

// 下拉框
select { height: 30px; }
select[multiple] {height: auto;}



/*-------------------------------------------------
  =layout
-------------------------------------------------*/
.page { margin:15px; overflow-x:auto; }
.page-hd { display: none; height:40px; padding-left:20px; line-height:40px; margin-bottom: 15px; background: @green; color:#fff; font-size: 14px;
  h1 { font-size:16px; font-weight: normal; }
}

.form { @red: #e74c3c;
  .kv { position: relative; min-height: 30px; _height: 30px; padding: 8px 0; border-bottom: 1px dashed #e2e2e2; line-height: 30px;}
  dt { position: absolute; left: 0; top: 8px; width: 170px; text-align: right; color: #333333; }
  dd { padding-left: 175px; }
  .actions { margin: 10px 0 0 175px; }
  .tip { color: #7d7d7d; line-height: 22px; }
  .required { color: @red; }

  .kv-error { display: none; color: @red;}
  .error {
    .kv-error { display: block;}
    .tip { display: none;}
    .input-text, textarea { border-color: @red;}
  }
}

.datas { overflow: auto;
  .table { width: 100%; text-align: left;
    min-width: 780px;
    tr { border-bottom: 1px solid #eee; }
    th, td { padding: 5px;}
  }
  thead { background: #EAEDEB; font-weight: normal; font-size: 14px;
    th {font-weight: normal; }
  }
  tbody {
    tr:hover, .selected { background: #F7F7F7;}
    img {vertical-align: -4px; margin-right: 5px;}
  }
}
.datas-hd { .clearfix();
  .actions { margin-bottom: 10px;}
}
.datas-bd  { margin-bottom: 10px; overflow-x: auto;}
.datas-ft { .clearfix();
  .actions { float: left;}
  .pager { float: right;}
}

.table-striped {
  // IE < 9 需要 js 添加 class tr-odd
  .tr-odd, tr:nth-child(odd) { background: #F7F7F7; }
}

.moveup, .movedown { display: inline-block; width: 16px; height: 16px; vertical-align: middle;}
.moveup { background-image: url(img/page/slice/moveup.png)}
.movedown { background-image: url(img/page/slice/movedown.png)}
.moveup.disabled {background-image: url(img/page/slice/moveup-disabled.png) }
.movedown.disabled {background-image: url(img/page/slice/movedown-disabled.png) }


.pager { line-height: 1.7;}

#column-tree-box { float:left; width:165px; margin-right:10px; _display:inline;
  h3 {height:40px; line-height: 40px; text-align: center; background: @green; color: #fff; font-size:14px; font-weight: normal;}
}

#column-tree {
  .closed {display: none;}
  .opened {display: block;}
  li {margin-top:5px; }
  a {display: block; height:40px; line-height: 40px; background: #F5FBFB;}
  a:hover {text-decoration: none}
  // level1
  ul a {padding-left: 10px}
  .level1 .level-title {background: #DAF2EF;}
  // level2
  ul ul a {padding-left: 20px}
  .level2 .level-title { background: #ECF8F7}
  // level3
  ul ul ul a {padding-left: 30px}

  .icon, .icon-dir {display:inline-block; width:16px; height: 12px; margin-right:3px; vertical-align: -2px; }
  .icon {background-image:url("@{slice}column-tree/icon.png");}
  .active  {
    a { color:#000; cursor: default;}
    .icon {background-image:url("@{slice}column-tree/icon-active.png")}
  }
  .icon-dir {background-image:url("@{slice}column-tree/icon-dir.png")}
  .icon-dir-opened {background-image:url("@{slice}column-tree/icon-dir-opened.png")}

}




// .datas-panel {
//   .divider {display: inline-block; width: 1px; height: 14px; vertical-align:-4px; background: url("@{slice}column-panel-divider.png"); }
// }
// .datas-filter { color: #666;
//   td { padding: 0 25px 10px 0; }
//   .select { font-size: 14px; }
// }

.navbar { height: 40px;
  .nav {
    li { float: left; }
    a { display: block; padding: 0 10px 5px; color: #333; font-size: 14px;
      &:hover { border-bottom: 2px solid #cdcdcd; text-decoration: none;}
    }
    .active a { color: @green; border-bottom: 2px solid @green; cursor: default;}
  }
}

.filterbar { margin-bottom: 10px; line-height: 3;
  .more-constraints { padding: 5px 10px; background: #f5f5f5;}
}




/* =页码
------------------------------------------*/
.pagination { position: relative; text-align: center;
    .inner { display: inline-block;
        a { color: #2d2f35}
        a:hover { color: @green; text-decoration: none;}
        .icon { width: 16px; height: 16px; display: inline-block; vertical-align: -4px; }
    }

    .page-first {
        .icon {background-image: url("@{slice}page-first.png")}
    }
    .page-prev  { margin-right: 14px;
        .icon { background-image: url("@{slice}page-prev.png")}
    }
    .page-next {
        .icon { background-image: url("@{slice}page-next.png")}
    }
    .page-last {
        .icon { background-image: url("@{slice}page-last.png")}
    }
    .pages { position: absolute; right: 20px; bottom: 0; }

}


/* =对话框
------------------------------------------*/
.alert { diplay: none; position: absolute; background: #fff; z-index: 10000;
    padding: 20px 40px; border: 1px solid @green; box-shadow: 0 0 20px 0 #ddd; font: 24px/42px @yahei; color: @green;
    .icon { display: inline-block; width: 42px; height: 42px;  vertical-align: middle; margin-right: 10px;}
    .icon-success { background-image: url("@{slice}icon-success.png"); }
    .icon-delete { background-image: url("@{slice}icon-delete.png"); }

}

.dialog { display: none; position: absolute; background: #fff; z-index: 10000;
    // 设计稿无边框
    border: 1px solid #363636;
    .hd { height: 60px; line-height: 60px; padding-left: 20px; background: #E4E4E4;
        h3 { font: normal 24px/60px @yahei; }
        .close {position: absolute; right: -16px; top: -16px;}
        .icon-close { display: block; width: 32px; height: 32px; background-image: url("@{slice}icon-close.png")}
    }
    .bd {padding: 20px; margin: auto;}
    .ft { border-top: 1px solid #A9E0D8; padding: 20px 0; text-align: center;
        .btn { font-family: @yahei;}
        .btn-y { margin-right: 30px; }
    }
}
.dialog-backdrop { display: none; position: absolute; top: 0; right: 0; z-index: 9999; width: 100%; height: 100%; background: #333; }

.dialog-addtags { width: 520px;
    .bd { width: 380px; margin: auto;}
    .tip { color: #19B09A; line-height: 30px;}
    textarea { width: 380px; height: 148px; border-color:#DAF2EF; resize: none; }
}
.dialog-censor { // width: 596px;
    .bd { margin-bottom: -20px;}
    .kv { position: relative; padding-left: 85px; margin-bottom: 20px; }
    .kv-label { position: absolute; left: 0; top: 0; width: 75px; text-align: right; color: #666;}
    .radio-group { width: 240px; overflow: hidden; *zoom: 1; margin-bottom: -20px;
        span { float: left; width: 120px; margin-bottom: 20px;  }
        input { margin-right: 5px;}
    }

    textarea { width: 442px; height: 116px; border-color:#DAF2EF; resize: none;}
}
.dialog-addfields {
    .bd { margin-bottom: -20px;}
    .kv { position: relative; padding-left: 110px; margin-bottom: 10px; line-height: 30px; }
    .kv-label { position: absolute; left: 0; top: 0; width: 100px; text-align: right; color: #666;}
    input[type="radio"] { margin-right: 5px;}
    .row { overflow: hidden; *zoom: 1;
        .kv { float: left; }
    }
    .tip { color: @green; margin-left: 5px;}
}





/*tabs*/
.tabhd { height:37px; _overflow:hidden;padding-left:20px;border-bottom:1px solid #D6D7E6;}
.tabhd li { height:36px;line-height:36px;cursor:pointer;float:left;width:112px;text-align:center;border:1px solid #DEDEDE;border-bottom:0;color:#235E99;font-size:14px;margin-right:8px;_display:inline;
background:#F9F9F9;
background-image:-webkit-linear-gradient(#F9F9F9 35px,#FAFAFA 35px);
background-image:-moz-linear-gradient(#F9F9F9 35px,#FAFAFA 35px);
background-image:-ms-linear-gradient(#F9F9F9 35px,#FAFAFA 35px);
background-image:-o-linear-gradient(#F9F9F9 35px,#FAFAFA 35px);
background-image:linear-gradient(#F9F9F9 35px,#FAFAFA 35px);
}
.tabhd .cur { height:37px;background:#fff;_position:relative;border-color:#D8D9E7;color:#333; }
.tabitem { position:relative; }
.tabitem .section-bd { padding:30px 10px 20px 100px;border-top:none; }
.tabitem td { padding:8px 0;  }
.tabitem td:first-child { text-align:right;padding-right:5px;/*js处理IE6*/ }
.tabbd .cur { display:block; }
.remark { color:#666; }
/*preview*/
.preview { position:absolute;left:500px;top:100px; }
/*pager*/
// .pager { margin-top:10px; }
// .pager a,.page-cur { display:inline-block;padding:0 5px;margin-right:3px;border:1px solid #CDD6E3;line-height:1.5; }
// .page-cur { background:#3A76AF;color:#fff;}
// .pager a:hover,.page-info { color:#3A76AF; }
// .page-disabled { color:#999; }
// .page-input {width:30px;border:1px solid #C9D2E0;}
/*.pager .page-prev { padding-left:15px;background-position:5px -72px; }*/
/*.pager .page-next { padding-right:15px;background-position:50px -112px; }*/
/*popup*/
// #mask { position:fixed;width:100%;height:100%;top:0;left:0;z-index:10000;background:#000;opacity:0.6;filter:alpha(opacity=60); }
// #popup { display:none;position:absolute;z-index:10001; }
// #popup2 { display:none;position:absolute;z-index:10002; }

#column-tree-box {float: left; width: 180px; height: 100%;}
#content-frame-box { position: fixed; top: 10px; bottom: 0; right: 10px; left: 210px;  }
#content-frame { width: 100%; height: 100%; }



// /*tooltip*/
// .tooltip { border:1px solid #E2C822;border-radius:2px;padding:0 3px;position:absolute;color:#FF7D00;background-color:#FFF9D7;z-index:10005; }
// .tooltip-arrow { background-position:-120px -83px; width:5px;height:7px;position:absolute;left:-5px;top:5px; }
// #alert { display:none;position:absolute;z-index:10002;height:60px;line-height:60px;float:left;background:url(img/main/alert.jpg) no-repeat right top; }
// .ok,.error,.warn {color:#235E99;font-size:14px;padding:0 10px 0 70px; }
// .ok { background:url(img/main/alert-ok.jpg) no-repeat left top; }
// .error { background:url(img/main/alert-error.jpg) no-repeat left top; }
// .warn { background:url(img/main/alert-warn.jpg) no-repeat left top;}

// /*busy*/
// .busy { position:relative;top:60%;width:100px;margin:auto;text-align:center;z-index:10003; }
// .busy-tip { color:#235E99;z-index:10003; }




